<template>
  <div class="baseDialog">
    <div>
      <el-drawer ref="drawer" :title="$i18n.t('mesTechnology.selectMaterials')" :visible.sync="drawer" direction="rtl" size="60%"
                 :before-close="handleClose">
        <ele-page :key="drawer" v-loading="loading" :formConfig="searchConfig" ref="eleTable" :operateList="operateList"
                  @handleOperateEvent="handleOperateEvent" @row-dblclick="getSelectMesTechnology" :column="column"
                  :getList="getList" uniqueId="mesTechnologyTable">

        </ele-page>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import {
  getMaterialCodeList as getList
} from '@/api/process/mesProcessMaterial';
import { getDict } from '@/api/common';

export default {
  name: 'MaterialDialog',
  data() {
    return {
      title: null,
      drawer: false,
      isLoading: false,
      loading: false,
      searchConfig: {
        inline: true,
        formDesc: {
          goodsCode: {
            type: 'input',
            layout: 12,
            label: $i18n.t('mesTechnology.goodsCode2')
          },
          goodsName: {
            type: 'input',
            layout: 12,
            label: $i18n.t('mesTechnology.goodsName2')
          },
          goodsTypeKey: {
            type: 'select',
            layout: 12,
            label: $i18n.t('mesTechnology.goodsTypeKey'),
            prop: {
              value: 'value',
              text: 'description'
            },
            options: async (data) => {
              const list = await getDict('material_type');
              return list.data.result;
            }
          }
        }
      },
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        {
          prop: 'goodsCode',
          label: $i18n.t('mesTechnology.goodsCode2'),
          width: '160',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'goodsName',
          label: $i18n.t('mesTechnology.goodsName2'),
          width: '200',
          showOverflowTooltip: true
        },
        {
          prop: 'goodsDesc',
          label: $i18n.t('mesTechnology.goodsDesc'),
          width: '160',
          showOverflowTooltip: true
        },
        {
          prop: 'seriesCode',
          label: $i18n.t('mesTechnology.seriesCode'),
          width: '160',
          showOverflowTooltip: true,
        },
        {
          prop: 'goodsTypeKey',
          label: $i18n.t('mesTechnology.goodsTypeKey'),
          width: '140',
          showOverflowTooltip: true,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getDict('material_type')
            self.goodsTypeList = list.data.result
            return list.data.result
          }
        },
        {
          prop: 'manufactureMethodValue',
          label: $i18n.t('mesTechnology.manufactureMethodValue'),
          width: '180',
          showOverflowTooltip: true,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getDict('manufacture_method')
            self.manufactureMethodList = list.data.result
            return list.data.result
          }
        },
        {
          prop: 'unit',
          label: $i18n.t('common.unit'),
          showOverflowTooltip: true
        },
        {
          prop: 'specification',
          label: $i18n.t('mesTechnology.specification'),
          width: '160',
          showOverflowTooltip: true
        },
        {
          prop: 'gbCode',
          label: $i18n.t('mesTechnology.gbCode'),
          width: '180',
          showOverflowTooltip: true
        }
      ],
      getList,
      operateList: [
        {
          name: $i18n.t("common.cancel"),
          handleName: "cls", //点击时返回的标识
        },
        {
          name: $i18n.t("mesTechnology.confirmAdd"),
          type: "success",
          icon: "el-icon-success",
          handleName: "add", // 点击时返回的标识
          isMultiple: true, // 至少选择一条
          disabled: (data) => {
            return !data.length > 0;
          },
        },
      ],
    }
  },
  computed: {},
  methods: {
    cancelForm(bool) {
      this.drawer = bool
    },
    handleClose(done) {
      done()

    },
    //表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        // 查询
        search: () => { },
        //   取消
        cls: () => {
          this.cancelForm(false)
        },
        // 确认
        add: () => {
          if (data.rows.length > 0) {
            this.$emit("response", data.rows);
            this.cancelForm(false);
          } else {
            this.$message.warning($i18n.t("common.single"));
          }
        }
      }
      fnc[data.handleName]()
    },

    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    },

    // 弹框表格，双击表格，或者点击确定 返回选中数据
    getSelectMesTechnology(data) {
      var li = [];
      li[0] = data
      this.$emit('response', li)
      this.cancelForm(false)
    }
  }
}
</script>
<style lang="scss" scoped>
.baseDialog {
  /deep/ .el-drawer__body {
    padding: 0 10px;
  }
  /deep/ .ele-form-search {
    height: auto!important;
  }
}
</style>
